import { buttonTree } from '@/services/system/resource';
import {useEffect, useState} from 'react';
import { treeDataWrapper } from '@/utils/common';
import { Tree } from 'antd';
import { PoweroffOutlined, BlockOutlined, WindowsOutlined, BarsOutlined, } from '@ant-design/icons';

const SystemResourceTree = (props) => {
  const {resourceIdList, checkResourceIdList} = props;

  const [treeData, handleTreeData] = useState([]);

  useEffect( () => {
    const lostData = async () => {
      const response = await buttonTree();
      const listData = Array.isArray(response.data) ? response.data : [];

      return listData;
    };

    lostData().then((listData) =>{
      treeDataWrapper(listData);
      handleTreeData(listData);

      if (listData.length > 0) {
      }
    });
  }, []);

  return (
    <Tree 
      onCheck={(checkedKeys, e) => checkResourceIdList(checkedKeys.checked)}
      checkedKeys={resourceIdList}
      checkable={true}
      checkStrictly={true}
      selectable={false}
      treeData={treeData}
      showIcon={true}
      icon={(props) => {
        if (props.disabled) return ( <BarsOutlined /> )

        if (props.type === 'Module') return ( <WindowsOutlined /> );
        if (props.type === 'Menu') return ( <BlockOutlined /> );
        if (props.type === 'Button') return ( <PoweroffOutlined /> );

        return null;
      }}
    />
  );
}

export default SystemResourceTree;